<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
	</head>
	<script src="js/jquery-1.8.3.min.js"></script>
	<script><!--
$(function() {
	$("#pic").click(function () {
		$("#upload").click();  //隐藏了input:file样式后，点击头像就可以本地上传
		$("#upload").on("change",function(){
			var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
			if (objUrl) {
				$("#pic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
			}
		});
	});
	//验证数据
	//帐号:不为空, ajax验证是否存在
	//昵称:不为空,
	//密码:不为空,6~18位
	//确认密码:两次一致
	$("#register").on("click",function() {
		if($("input[name='user_no']").val().length==0){
			$("input[name='user_no']").css("box-shadow","0 0 3px red");
			return false;//阻止表单提交
		}
		if($("input[name='user_name']").val().length==0){
			alert("昵称不能为空!");
			return false;//阻止表单提交
		}
		if($("input[name='user_logpwd']").val().length==0){
			alert("密码不能为空!");
			return false;//阻止表单提交
		}else{
			var reg = /^\w{6,18}$/;
			if(!reg.test($("input[name='user_logpwd']").val())){
				alert("密码6~18!");
				return false;//阻止表单提交
			}
		}
		if($("input[name='user_logpwd']").val()!=$("input[name='user_logpwd2']").val()){
			alert("两次密码不一致!");
			return false;//阻止表单提交
		}
	});

	$("input[name='user_no']").on("blur",function(){
		if($(this).val().length!=0){
			$.post("checkUserno.spring",{userno:$(this).val()},function(result){
				$("input[name='user_no']").next("p").html(result);
			},"text");
		}
	});
});
 
//建立一個可存取到該file的url
function getObjectURL(file) {
	var url = null ;
	if (window.createObjectURL!=undefined) { // basic
		url = window.createObjectURL(file) ;
	} else if (window.URL!=undefined) { // mozilla(firefox)
		url = window.URL.createObjectURL(file) ;
	} else if (window.webkitURL!=undefined) { // webkit or chrome
		url = window.webkitURL.createObjectURL(file) ;
	}
	return url ;
}

--></script>
	<style>
#pic {
	width: 100px;
	height: 100px;
	border-radius: 10px;
	margin: 20px auto;
	cursor: pointer;
}
</style>
	<body style="margin: 100px 200px;">
		<h2>
			用户注册
		</h2>
		<form action="register.spring" method="post" enctype="multipart/form-data">
			帐号:
			<input type="text" name="user_no" class="form-control"
				placeholder="请输入帐号..."><p></p>
			昵称:
			<input type="text" name="user_name" class="form-control"
				placeholder="请输入昵称...">
			密码:
			<input type="password" name="user_logpwd" class="form-control"
				placeholder="请输入密码...">
			确认密码:
			<input type="password" name="user_logpwd2" class="form-control"
				placeholder="请再次输入密码...">
			头像:
			<img id="pic" src="" />
			<input id="upload" name="user_img" accept="image/*" type="file"
				style="display: none;" />
			<br>
			<button id="register" class="btn btn-primary">
				注册
			</button>
		</form>

	</body>
</html>